/*
    Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved.
    Licensed under the MIT License.
    contact:dcdev_founder@foxmail.com
*/

//存储日期选择的layui组件渲染
var date_render = ``;
//存储上传图片的layui组件渲染
var upload_render = '';

function create_layui_input_form(array, outter_class = "", outter_style = "") {
    var html =
        `<div class="${outter_class}" style="${outter_style}"><form class="layui-form" action="" style="overflow:auto;">`;

    array.forEach(element => {
        switch (element.type) {
            case "submit":
                html = html +
                    `
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}">
    <div class="layui-input-block">
        <button type="button" class="layui-btn" lay-submit lay-filter="submit_form">${element['submittext']}</button>
        <button type="reset" class="layui-btn layui-btn-primary">${element['resettext']}</button>
    </div>
</div>
`
                break;
            case "text":
                element['is_multi_line'] ?
                    html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"} layui-form-text" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <textarea name="${element['column_name']}" ${element['is_require'] ? `required lay-verify="required"` :
''
} placeholder="${element['place_holder']}" class="layui-textarea"  maxlength=${element['max_value']}>${element['default_value']}</textarea>
    </div>
</div>
` :
html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <input type="text" name="${element['column_name']}" ${element['is_require'] ? `required lay-verify="required"` :
''
}  placeholder="${element['place_holder']}" autocomplete="off" value="${element['default_value']}" class="layui-input" maxlength=${element['max_value']}>
    </div>
</div>
`
                break;
            case "password":
                html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <input type="password" name="${element['column_name']}" ${element['is_require'] ? `required lay-verify="required"` :
''
}  placeholder="${element['place_holder']}" autocomplete="off" value="${element['default_value']}" class="layui-input" maxlength=${element['max_value']}>
    </div>
</div>
`
                break;
            case "phone":
                html = html +
                    `
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <input type="text" name="${element['column_name']}" ${element['is_require'] ? `required lay-verify="required|phone"` :
`lay-verify="phone"`
}  placeholder="${element['place_holder']}" autocomplete="off" value="${element['default_value']}" class="layui-input" maxlength=${element['max_value']}>
    </div>
</div>
`
                break;
            case "email":
                html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <input type="text" name="${element['column_name']}" ${element['is_require'] ? `required lay-verify="required|email"` :
`lay-verify="email"`
}  placeholder="${element['place_holder']}" autocomplete="off" value="${element['default_value']}" class="layui-input" maxlength=${element['max_value']}>
    </div>
</div>
`
                break;
            case "url":
                html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <input type="tel" name="${element['column_name']}" ${element['is_require'] ? `required lay-verify="required|url"` :
`lay-verify="url"`
}  placeholder="${element['place_holder']}" autocomplete="off" value="${element['default_value']}" class="layui-input" maxlength=${element['max_value']}>
    </div>
</div>
`
                break;
            case "identity":
                html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <input type="text" name="${element['column_name']}" ${element['is_require'] ? `required lay-verify="required|identity"` :
`lay-verify="identity"`
}  placeholder="${element['place_holder']}" autocomplete="off" value="${element['default_value']}" class="layui-input" maxlength=${element['max_value']}>
    </div>
</div>
`
                break;
            case "bool":
                html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <input type="checkbox" name="${element['column_name']}" lay-skin="switch" lay-text="${element['ttitle']}|${element['ftitle']}" value="${element['tvalue']}" 
            ${element['default_value'] ? 'checked' : ''}>
    </div>
</div>
`
                break;
            case "select":
                html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <select name="${element['column_name']}" ${element['is_require'] ? `required lay-verify="required"` :
''}>
            <option value=""></option>
            ${element['options'].map(function (item, i) {
return `<option value="${item}" title="${element['options_title'][i]}" ${element['default_value'] == item ? 'selected' : ''} >${item}</option>`;
}).join('')
}
                
        </select>
    
    </div>
</div>
`
                break;
            case "option":
                html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
    ${element['options'].map(function (item, i) {
return `<input type="radio" name="${element['column_name']}" value="${item}" title="${element['options_title'][i]}" ${element['default_value'] == item ? 'checked' : ''}>`
}).join('')
}
    
    </div>
</div>
`
                break;
            case "checkbox":
                html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
    ${element['options'].map(function (item, i) {
return `<input type="checkbox" name="${element['column_name']}" value="${item}" title="${element['options_title'][i]}" ${element['default_value'] == item ? 'checked' : ''}>`
}).join('')
}
    </div>
</div>
`
                break;

            case "number":
                html = html +
`
<div class="${element['is_horizontal']?"layui-inline":"layui-form-item"}" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        <input type="number" name="${element['column_name']}" ${element['is_require'] ? `required lay-verify="required"` :
''
}  placeholder="${element['unit']}" autocomplete="off" value="${element['default_value']}" class="layui-input" min="${element['min_value']}" max="${element['max_value']}">
        
    </div>
    
</div>
`
                break;
            case "date":
                date_render += `
//日期选择
laydate.render({
    elem: '#date1',
    value: '${element['default_value']}',
    min: "${element['start_date_value']}",
    max: "${element['end_date_value']}",

});
                        `
                html = html +
                    `
<div class="layui-form-item" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
    <input type="text" name="${element['column_name']}" id="date1" autocomplete="off" ${        element['is_require'] ? `required lay-verify="required"` :
            ''
        } class="layui-input" placeholder="${element['place_holder']}">
    </div>
</div>
`
                break;
            case "image":
                upload_render += `
//普通图片上传
var uploadInst = upload.render({
elem: '#${element['column_name']}'
,field:'${element['column_name']}'
,url: 'https://httpbin.org/post' //改成您自己的上传接口
//文件提交上传前的回调
,before: function(obj){
    //预读本地文件示例，不支持ie8
    obj.preview(function(index, file, result){
    $('#${element['column_name']}shop').attr('src', result); //图片链接（base64）
    });
}
//执行上传请求后的回调。
,done: function(res){
    //如果上传失败
    if(res.code > 0){
    return layer.msg('上传失败');
    }
    //上传成功
}
//执行上传请求出现异常的回调（一般为网络异常、URL 404等）。
,error: function(){
    //演示失败状态，并实现重传
    
}
});
`
                html = html +
                    `
<div class="layui-form-item" ${element['hidden'] ? `style="display: none;"` : ''}>
    <label class="layui-form-label">${element['title']}</label>
    <div class="layui-input-block">
        
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="${element['column_name']}">上传图片</button>
            <div class="layui-upload-list">
            <img class="layui-upload-img" src="${element['default_value']}" id="${element['column_name']}shop" name="${element['column_name']}" style="width:20px;height:20px;">
            </div>
        </div> 
    </div>
</div>
`
                break;

            case "html":
                html = html + element['html'];
                break;
            default:
                break;
        }
    });
    html += `</form></div>`;
    return html;
}

